<template>
  <div>
    <el-form :model="formData" ref="ruleForm" label-width="250px" class="demo-ruleForm">
      <el-form-item label="茶桌使用时长(分钟)" prop="id1" :rules="[{ required: true, message: '请输入茶桌使用时长(分钟)', trigger: 'blur' }]">
        <el-input v-model="formData.id1" disabled onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"></el-input>
      </el-form-item>
      <el-form-item label="ftp存放路径" prop="id2" :rules="[{ required: true, message: '请输入ftp存放路径', trigger: 'blur' }]">
        <el-input v-model="formData.id2"></el-input>
      </el-form-item>
      <el-form-item label="ftp文件姓名列数(从0开始)" prop="id3" :rules="[{ required: true, message: '请输入ftp文件姓名列数(从0开始)', trigger: 'blur' }]">
        <el-input v-model="formData.id3"></el-input>
      </el-form-item>
      <el-form-item label="ftp文件电话列数(从0开始)" prop="id4" :rules="[{ required: true, message: '请输入ftp文件电话列数(从0开始)', trigger: 'blur' }]">
        <el-input v-model="formData.id4"></el-input>
      </el-form-item>
      <el-form-item label="ftp文件证件号列数(从0开始)" prop="id5" :rules="[{ required: true, message: '请输入ftp文件证件号列数(从0开始)', trigger: 'blur' }]">
        <el-input v-model="formData.id5"></el-input>
      </el-form-item>
      <el-form-item label="门禁服务器地址" prop="id6" :rules="[{ required: true, message: '请输入门禁服务器地址', trigger: 'blur' }]">
        <el-input v-model="formData.id6"></el-input>
      </el-form-item>
      <el-form-item label="门禁的appkey" prop="id7" :rules="[{ required: true, message: '请输入门禁的appkey', trigger: 'blur' }]">
        <el-input v-model="formData.id7"></el-input>
      </el-form-item>
      <el-form-item label="门禁的appsecret" prop="id8" :rules="[{ required: true, message: '请输入门禁的appsecret', trigger: 'blur' }]">
        <el-input v-model="formData.id8"></el-input>
      </el-form-item>
      <el-form-item label="微信公众号开发者ID" prop="id9" :rules="[{ required: true, message: '请输入微信公众号开发者ID', trigger: 'blur' }]">
        <el-input v-model="formData.id9"></el-input>
      </el-form-item>
      <el-form-item label="微信公众号开发者密码" prop="id10" :rules="[{ required: true, message: '请输入微信公众号开发者密码', trigger: 'blur' }]">
        <el-input v-model="formData.id10"></el-input>
      </el-form-item>
      <el-form-item label="微信公众号令牌" prop="id11" :rules="[{ required: true, message: '请输入微信公众号令牌', trigger: 'blur' }]">
        <el-input v-model="formData.id11"></el-input>
      </el-form-item>

      <el-form-item label="ftp服务器" prop="id12" :rules="[{ required: true, message: '请输入ftp服务器', trigger: 'blur' }]">
        <el-input v-model="formData.id12"></el-input>
      </el-form-item>
      <el-form-item label="ftp端口" prop="id13" :rules="[{ required: true, message: '请输入ftp端口', trigger: 'blur' }]">
        <el-input v-model="formData.id13"></el-input>
      </el-form-item>
      <el-form-item label="ftp登录用户名" prop="id14" :rules="[{ required: true, message: '请输入ftp登录用户名', trigger: 'blur' }]">
        <el-input v-model="formData.id14"></el-input>
      </el-form-item>
      <el-form-item label="ftp登录密码" prop="id15" :rules="[{ required: true, message: '请输入微信ftp登录密码', trigger: 'blur' }]">
        <el-input v-model="formData.id15"></el-input>
      </el-form-item>
      <el-form-item label="星级以上才可预约" prop="id16" :rules="[{ required: true, message: '星级以上才可预约', trigger: 'blur' },{ pattern:'^[0-9]*[1-9][0-9]*$', message: '只能输入整数', trigger: 'blur'}]">
        <el-input v-model="formData.id16"></el-input>
      </el-form-item>
      <el-form-item label="ftp文件VIP列数(从0开始)" prop="id17" :rules="[{ required: true, message: 'ftp文件VIP列数(从0开始)', trigger: 'blur' }]">
        <el-input v-model="formData.id17"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="medium" @click="submitForm('ruleForm')" style="width: 250px;height: 45px">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        id1: '',//茶桌使用时长(分钟)
        id2: '',//ftp存放路径
        id3: '',//ftp文件姓名列数(从0开始)
        id4: '',//ftp文件电话列数(从0开始)
        id5: '',//ftp文件证件号列数(从0开始)
        id6: '',//门禁服务器地址
        id7: '',//门禁的appkey
        id8: '',//门禁的appsecret
        id9: '',//微信公众号开发者ID
        id10: '',//微信公众号开发者密码
        id11: '',//微信公众号令牌
        id12: '',//ftp服务器
        id13: '',//ftp端口
        id14: '',//ftp登录用户名
        id15: '',//ftp登录密码
        id16: '',//星级以上才可预约
        id17: '',//ftp文件VIP列数(从0开始)
      },
    };
  },
  activated() {
  },
  mounted() {
    this.initData();
  },
  methods: {
    //初始化
    initData() {
      this.$navigation0All().then((result) => {
        for (let i = 0; i < result.length; i++) {
          this.formData[`id${result[i].id}`]=result[i].paramData;
        }
      })
    },
    //保存
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data=[]
          for (let i = 1; i < 18; i++) {
            data.push({id:i,paramData:this.formData[`id${i}`]})
          }
          this.$navigation0PatchSave(data).then(() => {
            this.$message.success('保存成功');
            this.initData();
          })
          console.log(data)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
